import React,{Component} from 'react'
// import Header from '../component/header'
import './index.less'

class Ball extends Component {
    constructor(props) {
        super(props);
        this.state = {
            top: this.props.ballAttr.top,
            left: this.props.ballAttr.left,
            r: 0,
        };
    }
    componentDidMount() {
        console.log(`第${this.props.index}條數據`)
        let top = this.props.ballAttr.top;
        let left = this.props.ballAttr.left;
        let intervalY = this.props.ballAttr.intervalY;
        let intervalX = this.props.ballAttr.intervalX;
        let r = this.props.ballAttr.r;
        this.setState({top, left, r})
        console.log(this.props.ballAttr.intervalMaxY)
        let interval = setInterval(() => {
            if((intervalY >0 && top + intervalY > this.props.ballAttr.intervalMaxY) || (intervalY < 0 && top + intervalY < 0)){
                intervalY = - intervalY
            }
            if((intervalX >0 && left + intervalX > this.props.ballAttr.intervalMaxX) || (intervalX < 0 && left + intervalX < 0)){
                intervalX = - intervalX
            }
            top += intervalY
            left += intervalX
            r = r -1
            if(r <= 0) {
                clearInterval(interval)
                this.props.delete(this.props.index)
            }
            this.setState({top, left, r})
        }, this.props.ballAttr.time )
    }
    render() {
        const attr = this.props.ballAttr
        const r = this.state.r
        const ballStyle = {
            width: 2*r,
            height: 2*r,
            borderRadius: r,
            background: attr.color,
            top: this.state.top,    // value的值為number或string
            left: this.state.left,
        }
        return (
            <div className="ball" style={ballStyle}>
            </div>
        );
    }
}

class Streak extends Component {
    constructor(props) {
        super(props);
        this.state = {
           w: 300,
           h: 300,
           ballArr: [],
        };
    }
  componentDidMount() {
    console.log(this.refs.balls.offsetHeight, this.refs.balls.offsetWidth)
    this.setState({
        w: this.refs.balls.offsetWidth,
        h: this.refs.balls.offsetHeight
    })
      console.log(this.state)
  }
  randoms(min, max){
        return parseInt(Math.random()*(max-min) + min)
    }
  ballAttr(x,y) {
    const r = this.randoms(12,60)
    return {
        r: r,
        color: `rgba(${this.randoms(0,255)}, ${this.randoms(0,255)}, ${this.randoms(0,255)}, ${this.randoms(0,10)/10})`,
        top: y - r >=0 ? y-r : 0,
        left: x - r >=0 ? x-r : 0,
        time: 60,
        intervalX: this.randoms(10,20),
        intervalY: this.randoms(10,20),
        intervalMaxX: this.state.w - 2*r,
        intervalMaxY: this.state.h - 2*r,
    }
  }
    move(e){
       console.log('移動')
        const event = e || event
        console.log(event.pageX, event.pageY)
        if(this.state.ballArr.length < 500){
            this.state.ballArr.push(this.ballAttr(event.pageX, event.pageY))
            this.forceUpdate(); // 強制刷新視圖
        }
        // else {
        //    this.setState({
        //        ballArr: []
        //    })
        // }
    }
    delete() {
        let self = this
        return (index) => {
            console.log(`刪除第${index}條數據`)
            console.log(this.state)
            self.state.ballArr.splice(index, 1)
        }
    }
  render() {
    return (
      <div className="streak" ref="balls" onMouseMove={(e) =>{this.move(e)}}>
          {/*注意return出組件 （箭頭函數在沒大括號時默認return出最後一個表達式）*/}
          {this.state.ballArr.map((item, index) =>
              <Ball ballAttr={item} key={index} delete={this.delete()} index={index}/>
          )}
          {/*{balls}*/}
      </div>
    );
  }
}

// ReactDOM.render(<History />, document.getElementById('root'));
export default Streak
